<template>
  <div class="notice-manage-box">
    <div class="search-box">  
        <el-date-picker
            v-model="selectParam.createDate"
            value-format=“yyyy-MM-dd”
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        &nbsp;&nbsp;
        <el-input
            style="width:240px"
            placeholder="请输入公告标题"
            v-model="selectParam.title"
            clearable>
        </el-input>
        &nbsp;&nbsp;
        <el-button type="primary" icon="el-icon-search" @click="selectNotices">搜索</el-button>
    </div>
    <div style="margin-top: 20px;margin-left: 5%;">
        <el-button @click="toggleSelection()" icon="el-icon-close">取消选择</el-button>
        <el-button @click="createFormVisible = true" icon="el-icon-plus" type="primary">新建公告</el-button>
        <el-button plain @click="alertNoticeShow" icon="el-icon-edit" type="warning">修改选中公告</el-button>
        <el-button @click="deleteNoticeByIds" icon="el-icon-delete" type="danger">删除选中公告</el-button>
    </div>
    <div class="notice-list-box">
        <el-table
            ref="multipleTable"
            :data="notices"
            tooltip-effect="dark"
            :default-sort = "{prop: 'createtime', order: 'descending'}"
            style="width: 100%;"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" style="margin-left:40px">
                        <el-form-item label="公告编号">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="公告标题">
                            <span>{{ props.row.title }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <span>{{ props.row.createtime }}</span>
                        </el-form-item>
                        <el-form-item label="公告内容">
                            <span>{{ props.row.content }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
            label="公告编号"
            width="400">
            <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
            prop="title"
            label="标题"
            width="120">
            </el-table-column>
            <el-table-column
            prop="createtime"
            label="创建时间"
            sortable
            show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
    
    <el-dialog title="新建公告" :visible.sync="createFormVisible">
        <el-form>
            <el-form-item label="公告标题" :label-width="formLabelWidth">
            <el-input placeholder="请输入公告标题" v-model="noticeObj.title"></el-input>
            </el-form-item>
            <el-form-item label="公告内容" :label-width="formLabelWidth">
            <el-input type="textarea" :rows="3" placeholder="请输入公告内容" v-model="noticeObj.content"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="createFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="createNotice">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="修改公告" :visible.sync="alertFormVisible">
        <el-form>
            <el-form-item label="公告标题" :label-width="formLabelWidth">
            <el-input placeholder="请输入公告标题" v-model="noticeObj.title"></el-input>
            </el-form-item>
            <el-form-item label="公告内容" :label-width="formLabelWidth">
            <el-input type="textarea" :rows="3" placeholder="请输入公告内容" v-model="noticeObj.content"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="alertFormVisible = false;toggleSelection()">取 消</el-button>
            <el-button plain type="primary" @click="alertNotice">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery';
import {v4 as uuidv4} from 'uuid';
import { mapState } from 'vuex';
import debounce from 'lodash/debounce';
export default {
    name:'noticeManage',
    data() {
      return {
        selectParam:{
            title:'',
            createDate:''
        },
        noticeObj:{
            title:'',
            content:'',
        },
        multipleSelection: [],
        createFormVisible: false,
        alertFormVisible:false,
        formLabelWidth: '120px'
      }
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      createNotice:debounce(function(){
        if(this.noticeObj.title===''||this.noticeObj.content===''){
            this.$notify({
                title: '警告',
                message: '标题/公告不可为空',
                type: 'warning'
            });
            return;
        }
        this.createFormVisible = false;
        let obj=Object.assign(this.noticeObj,{'id':uuidv4().slice(0,-4),createtime:this.dayjs().format("YYYY-MM-DD HH:mm:ss")})
        this.$store.dispatch("_notice/createNotice",obj)
      }),
      alertNoticeShow:debounce(function(){
        if(this.multipleSelection.length!=1){
            this.$notify({
                title: '警告',
                message: '必须选中一条公告',
                type: 'warning'
            });
            return;    
        }
        this.noticeObj.title=this.multipleSelection[0].title;
        this.noticeObj.content=this.multipleSelection[0].content;
        this.alertFormVisible=true;
      }),
      alertNotice:debounce(function(){
        if(this.noticeObj.title===''||this.noticeObj.content===''){
            this.$notify({
                title: '警告',
                message: '标题/公告不可为空',
                type: 'warning'
            });
            return;
        }
        this.alertFormVisible = false;
        let obj=Object.assign(this.multipleSelection[0],{'title':this.noticeObj.title,'content':this.noticeObj.content,createtime:this.dayjs().format("YYYY-MM-DD HH:mm:ss")});
        //更新
        this.$store.dispatch("_notice/updateNotice",obj)
        this.toggleSelection();
      }),
      deleteNoticeByIds:debounce(function(){
        if(this.multipleSelection.length===0){
            this.$notify({
                title: '警告',
                message: '您必须选择一条公告',
                type: 'warning'
            });
            return;
        }
        this.$confirm('此操作将永久删除公告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let ids=[];
            $.each(this.multipleSelection,function(index,item){
                ids.push(item.id)
            })
            //删除
            this.$store.dispatch("_notice/deleteNotices",ids);
            this.toggleSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });   
          this.toggleSelection();       
        });
      }),
      selectNotices(){
        this.$store.dispatch("_notice/getNoticeByCondition",this.selectParam)
        this.selectParam.createDate='';
        this.selectParam.title='';
      }
    },
    computed:{
        ...mapState('_notice',['notices'])
    },
    mounted(){
        this.$store.dispatch("_notice/getNotices")
    },
    watch:{
      'selectParam.createDate'(newVal){
        if(newVal==null){
          this.selectParam.createDate='';
        }
      }
    }
}
</script>

<style scoped lang="css">
    .notice-manage-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .search-box{
        margin-top: 2%;
        margin-left: 5%;
        height: 7%;    
        width:90%;    
    }
    .notice-list-box{
        position: inherit;
        margin-top: 2%;
        left: 5%;
        width:70%;
        height: 70%;
        overflow: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
</style>